<template>
  <div class="wrapper">
    <navtop class="top">
      <div slot="center">商品分类</div>
    </navtop> 
    <categoryleft
      :categorylist="categorylist"
      class="categoryleft"
      @trClick="trClick"
    >
    </categoryleft>
    <categoryright :rightinfolist="rightinfolist"></categoryright>
  </div>
</template>
<script>
import { getcategory, getSubcategory } from "../../network/category.js";
import navtop from "../../components/common/navbar/Navbar";
import categoryleft from "./childComps/categoryleft";
import categoryright from "./childComps/categoryright";
import scroll from "../../components/common/better-scroll/better-scroll";
export default {
  name: "Home",
  components: {
    navtop,
    categoryleft,
    categoryright,
    scroll,
  },
  data() {
    return {
      scroll: null,
      categorylist: [],
      index: 1,
      maitKey: 1,
      rightinfolist: [],
    };
  },
  methods: {
    _getcategory() {
      getcategory().then((res) => {
        this.categorylist = res.data.data.category.list;
      });
    },
    _getSubcategory(maitKey) {
      getSubcategory(maitKey).then((res) => {
        // 商品列表全部数据都在一个数组中
        this.rightinfolist = res.data.data.list;
      });
    },
    trClick(index) {
      this.index = index;
      this.maitKey = this.categorylist[this.index].maitKey;
      // 点击时请求相关数据
      this._getSubcategory(this.maitKey);
      // this.rightinfolist =
    },
  },
  computed: {},
  created() {
    this._getcategory();
  },
  mounted() {
  },
};
</script>

<style scoped>
h2 {
  font-size: 100px;
}
.top {
  color: white;
  font-size: 14px;
  background-color: #ff3324;
}
.content {
  height: calc(100% - 44px);
  overflow: hidden;
}
</style>